<template>
	<view>
		<view class="text1" style="background-color: #d5e9fc;">最近观看</view>

		<view v-if="videoList.length==0||shenheState" class="videocss"
			style="display: flex;justify-content: center;align-items: center;">

			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text=" ">
			</u-empty>
		</view>

		<view v-else class="videocss">
			<view class="video-item" v-for="(item,index) in videoList" :key="index" @click="toVideoDetail(item)">
				<image class="video-pic" :src="item.tv_image"></image>
				<view class="tv_name">{{item.tv_name}}</view>
			</view>
			<view v-if="videoList.length==2" @click="jump('/pages_sub/moreRecords/moreRecords')">
				<view
					style="width: 220rpx;margin-top: 10rpx;border-radius: 10rpx; height: 340rpx;background-color:#ffffff;border: 1px solid orange;">
					<view style="height: 60%;display: flex;justify-content: center;align-items: center;">
						<image src="../../../static/playkkk.png" mode="" style="width:60px;height: 60px;"></image>
					</view>

					<view
						style="color:red;text-align: center;font-weight: 600;display: flex;flex-direction: column;justify-content: center;">
						<text>更多记录</text>
						<image src="../../../static/left.png" mode=""
							style="width: 20px;height: 20px;margin: 10px auto;"></image>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="60px"></u-gap>
		<view class="text1">{{vk.vuex.get('$app.appinfo.shenheState')?'历史记录':'我的追剧'}}</view>
		<!-- <u-gap height="20rpx"></u-gap> -->

		<view class="itw" v-if="followList.length==0||shenheState">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text=" ">
				暂无数据...
			</u-empty>
		</view>

		<view v-else style="display: flex;width: 750rpx;" v-for="(item,index) in followList" :key="index">
			<view style="display: flex;width: 700rpx;" @click="toVideoDetail(item)">
				<view class="">
					<image class="watch-pic" :src="item.tv_image"></image>
				</view>
				<view>
					<u-gap height="30rpx"></u-gap>
					<view class="tv_name_zhuiju">{{item.tv_name}}</view>
					<u-gap height="40rpx"></u-gap>
					<view style="font-size: 28rpx;">看到
						<text style="margin-left: 10rpx;color: #f9752c;">第{{item.series||'1'}}集</text>
					</view>
					<u-gap height="20rpx"></u-gap>
					<view style="font-size: 28rpx;" v-if="item.update_witch">更新至
						<text style="margin-left: 10rpx;font-weight: 600;">第{{item.update_witch}}集</text>
					</view>
					<view style="font-size: 28rpx;" v-else>数据更新中...</view>
				</view>
				<view class="renew">更新</view>
			</view>
			<view class="dot" @click="delaction(item,index)">...</view>
		</view>

		<view v-if="vk.vuex.get('$app.appinfo.gzhTip')">
			<button class="gzh" open-type="openAwemeUserProfile" :data-aweme-id="vk.vuex.get('$app.dykefu')">
				<image src="../../../static/gzh.png" style="width: 50rpx;height: 50rpx;margin: 0 20rpx 0 0;"></image>
				<view>{{vk.vuex.get('$app.appinfo.gzhTipText')}}</view>
			</button>
		</view>

		<u-gap height="300rpx"></u-gap>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		components: {

		},
		data() {
			return {
				shenheState: true,
				followList: [],
				page: 1,
				videoList: [],
			}
		},
		onLoad() {
			this.shenheState = vk.vuex.get('$app.appinfo.shenheState');
			//如果用户登陆后,检测到邀请码长度大于10，则关闭审核模式正常播放
			let user_invite_code = vk.vuex.get('$user.userInfo.invite_code');
			if (user_invite_code.length > 10) {
				this.shenheState = false;
			}
		},
		onShow() {
			this.loadData()
		},

		async onReachBottom() {
			const List = await db.collection("a_follow_tv").where({
				user_id: vk.vuex.get('$user.userInfo._id')
			}).skip(this.page * 20).orderBy('_add_time', 'desc').limit(20).get()
			this.followList = this.followList.concat(List.result.data)
			this.page = this.page + 1
		},

		methods: {
			async loadData() {
				vk.showLoading('加载中...');
				db.collection("a_history").where({
					user_id: vk.vuex.get('$user.userInfo._id')
				}).orderBy('_add_time', 'desc').limit(2).get().then(watchList => {
					this.videoList = watchList.result.data
				})

				db.collection("a_follow_tv").where({
					user_id: vk.vuex.get('$user.userInfo._id')
				}).orderBy('_add_time', 'desc').limit(20).get().then(List => {
					this.followList = List.result.data;
					vk.hideLoading();
					this.gengxin(List.result.data)
				})
			},
			async gengxin(followList) {
				for (var i = 0; i < followList.length; i++) {
					const tv_temp = await db.collection('a_tv_series').where({
						tv_id: followList[i].tv_id
					}).orderBy('series', 'desc').limit(1).get()
					followList[i].update_witch = tv_temp.result.data[0].series
				}
				this.followList = [];
				this.followList = followList;
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			delaction(item, index) {
				uni.showModal({
					content: '是否移除该追剧',
					success: (res) => {
						if (res.confirm) {
							this.followList.splice(index, 1) //删除下标为index的一项
							db.collection('a_follow_tv').doc(item._id).remove()
							vk.toast(item.tv_name + '移除成功！');
						} else {
							console.log("已取消")
						}
					}
				})
			},
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}

				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id,
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7fcfc;

	}

	.itw {
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);
		border-radius: 20px;
		color: #ae9e97;
		width: 700rpx;
		height: 240px;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 15px;
	}

	.tv_name_zhuiju {
		font-size: 32rpx;
		font-weight: 600;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tv_name {
		font-size: 28rpx;
		text-align: center;
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
		padding: 10rpx 2rpx 2rpx 8rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.text1 {
		padding-left: 20rpx;
		padding-bottom: 15px;
		font-size: 36rpx;
		/* font-weight: 600; */
	}

	.videocss {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 20px;
		height: 340rpx;
		/* background: linear-gradient(to bottom, #ffe6da, #fffbfa); */
		background: linear-gradient(to bottom, #d5e9fc, #f7fcfc);
	}

	.video-item {
		margin: 12rpx 15rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);
		border-radius: 20px;
		width: 220rpx;

	}

	.video-pic {
		width: 220rpx;
		height: 340rpx;
		border-radius: 20rpx
	}

	.watch-pic {
		width: 167rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin: 20rpx 20rpx 10rpx 20rpx;
	}

	.renew {
		position: absolute;
		font-size: 16rpx;
		color: #fff;
		padding: 4rpx 10rpx;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		background-color: #f9752c;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.dot {
		color: #616161;
		font-weight: 700;
		font-size: 60rpx;
		margin: 75rpx 80rpx 0 0;
	}

	.gzh {
		position: fixed;
		bottom: 50rpx;
		/* background-image: linear-gradient(to right, #ffaaff, #ffaa7f); */
		background-image: linear-gradient(to right, #78b0fe, #7375ea);
		/* background-color: #3c3930; */
		color: #ffffff;
		width: 600rpx;
		font-size: 34rpx;
		margin-left: 65rpx;
		/* text-align: center; */
		border-radius: 60rpx;
		padding: 14rpx;
		display: flex;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}
</style>